<template>
    <div class="date">
        <div class="date_content">
            <input type="text" readonly class="el-input__inner" v-model="dateStr" placeholder="请选择" @click="changeVal">
            <span class="el-input__suffix">
             <span class="el-input__suffix-inner">
                 <i class="el-select__caret el-input__icon el-icon-arrow-up" :class="{'is-reverse':isClick}"></i>
             </span>

         </span>
            <div class="mdule_box" v-if="isClick">
                <div class="tab">
                    <div class="tab_nav">
                        <div class="item" v-for="(item,index) in choseList" :key="index" :class="{'current':item.isClick}" @click="changeDate(index)">{{item.label}}</div>

                    </div>
                    <div class="tab_content">
                        <div class="content year" v-if="activeIndex==0">
                            <div class="row" v-for="(item,index) in dateList" :key="index">
                                <div class="label">{{item.label}}</div>
                                <div class="item" v-for="(a,i) in item.data()" :class="{'current':a==year}"  :key="i" @click="choseYear(a)">{{a}}</div>

                            </div>

                        </div>
                        <div class="content month" v-if="activeIndex==1">
                            <div class="item" v-for="(item,index) in 12" :key="index" :class="{'current':item==month}" @click="choseMonth(item)">{{item}}</div>

                        </div>
                        <div class="content date" v-if="activeIndex==2">
                            <div class="item" data-val="1" v-for="(item,index) in 31" :class="{'current':item==date}" :key="index" @click="choseDate(item)">{{item}}</div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <toast :text="text" ref="toast"></toast>
    </div>
</template>

<script>
    import toast from "./toast";
    export default {
        name: "dateBox",
        data() {
            return {
                isClick: false,
                text:"测试",
                dateStr:"",
                year:"",
                month:"",
                date:"",
                activeIndex:0,
                isShow:false,
                choseList:[{
                    label:'选择年',
                    isClick:true,
                },{
                    label:'选择月',
                    isClick:false,
                },{
                    label:'选择日',
                    isClick:false,
                }],
                dateList:[
                    {
                        label:'00后',
                        data:()=>{
                            let arr=[];
                            for(let i=2000;i<2004;i++){
                                arr.push(i)
                            }
                            return arr;
                        }
                    },
                    {
                        label:'90后',
                        data:()=>{
                            let arr=[];
                            for(let i=1990;i<2000;i++){
                               arr.push(i)
                            }
                            return arr;
                        }
                    },
                    {
                        label:'80后',
                        data:()=>{
                            let arr=[];
                            for(let i=1980;i<1990;i++){
                                arr.push(i)
                            }
                            return arr;
                        }
                    },
                    {
                        label:'70后',
                        data:()=>{
                            let arr=[];
                            for(let i=1970;i<1980;i++){
                                 arr.push(i)
                            }
                            return arr;
                        }
                    },
                    {
                        label:'60后',
                        data:()=>{
                            let arr=[];
                            for(let i=1960;i<1970;i++){
                                 arr.push(i)
                            }
                            return arr;
                        }
                    }
                ],
            }
        },
        components: {toast},
        mounted() {
            // layer.msg('一段提示信息');
            document.addEventListener('click',e => {
                console.log(e.target)
                if(!this.$el.contains(e.target)){
                    if(this.isClick){
                        if(!this.year){
                            this.text='请选择年份'
                            this.$refs.toast.open();

                        }else if(!this.month){
                            this.text='请选择月份'
                            this.$refs.toast.open();

                        }else if(!this.date){
                            this.text='请选择日'
                            this.$refs.toast.open();

                        }else{
                            this.isClick = false//点击其他区域关闭
                        }
                    }


                }else{
                    this.isClick = true
                }
            })

        },
        methods: {
            //切换
            changeDate(index){

                if(index==1){
                    if(!this.year){
                        this.text='请选择年份'
                        this.$refs.toast.open();
                        return ;
                    }
                }
                if(index==2){
                    if(!this.month){
                        this.text='请选择月份'
                        this.$refs.toast.open();
                        return ;
                    }
                }
                console.log(index)
                this.activeIndex=index;
                this.choseList.forEach((a,i)=>{
                    a.isClick=false;
                    if(index==i){
                        a.isClick=true;
                    }
                })
            },
            add0(str){
              if(Number(str)>9){
                  return str;
              }  else{
                  return '0'+str;
              }
            },
            //选择年
            choseYear(year){
                console.log(year)
                this.year=year;
                if(this.month&&this.date){
                    this.dateStr=year+'-'+this.add0(this.month)+'-'+this.add0(this.date);

                }else{
                    this.dateStr=year;
                    this.choseList[0].label=this.year;
                    // ;
                    setTimeout(()=>{
                        this.choseList.forEach((a,i)=>{
                            a.isClick=false;
                            if(i==1){
                                a.isClick=true;
                                this.activeIndex=1
                            }
                        })
                    })

                }

            },
            //选择月
            choseMonth(month){
                console.log(month)
                this.month=month
                if(this.year){
                    this.dateStr=this.year+'-'+this.add0(this.month);
                    this.choseList[1].label=this.add0(this.month);
                    this.activeIndex=2;
                    this.choseList.forEach((a,i)=>{
                        a.isClick=false;
                        if(i==2){
                            a.isClick=true;
                        }
                    })
                }else if(this.date){
                    this.dateStr=this.year+'-'+this.add0(this.month)+'-'+this.add0(this.date);
                    this.choseList[1].label=this.add0(this.month)
                    this.activeIndex=2;
                    this.choseList.forEach((a,i)=>{
                        a.isClick=false;
                        if(i==2){
                            a.isClick=true;
                        }
                    })
                }else{
                    this.text='请选择年份'
                    this.$refs.toast.open()
                }
            },
            //选择日
            choseDate(date){
                console.log(date);
                this.date=date;
                if(this.year&&this.month){
                    this.dateStr=this.year+'-'+this.add0(this.month)+'-'+this.add0(this.date);
                    this.choseList[2].label=this.add0(this.date)
                }else{
                    this.text='请选择月份'
                    this.$refs.toast.open()
                }

            },
            changeVal() {
                this.isClick = true;
            }
        }
    }
</script>

<style scoped lang="scss">
    @import "../styles/comment.scss";

    .date {
        width: 100%;

        .date_content {
            position: relative;

            .mdule_box {
                position: absolute;
                right: 0px;
                left: auto;
                width: 450px;
                top: 100%;
                padding-top: 5px;

                .tab {
                    background-color: #fff;
                    box-shadow: 0 3px 6px -4px rgb(0 0 0 / 12%), 0 6px 16px 0 rgb(0 0 0 / 8%), 0 9px 28px 8px rgb(0 0 0 / 5%);
                    border-radius: 2px;
                    padding: 8px 15px 15px;

                    .tab_content {
                        padding-top: 10px;

                        .date {
                            text-align: left;
                            .item.current{
                                border: 1px solid $backgroundColor;
                                background-color: $backgroundColor;
                                color: #fff;
                            }
                           .item{
                               text-align: center;
                               width: 48px;
                               display: inline-block;
                               vertical-align: middle;
                               line-height: 30px;
                               cursor: pointer;
                               margin: 1px;
                               font-size: 14px;
                               border: 1px solid #fff;
                           }
                        }

                        .month {
                            font-size: 0;
                            text-align: left;
                            .item.current{
                                border: 1px solid $backgroundColor;
                                background-color: $backgroundColor;
                                color: #fff;
                            }
                            .item {
                                display: inline-block;
                                vertical-align: middle;
                                line-height: 30px;
                                padding: 0 15px;
                                cursor: pointer;
                                margin: 1px;
                                font-size: 14px;
                                border: 1px solid #fff;
                            }
                        }

                        .year {
                            /*padding-left: 40px;*/
                            position: relative;
                            font-family: Arial;
                            font-size: 0;
                            .row{
                                padding-left: 40px;
                                position: relative;
                                font-family: Arial;
                                font-size: 0;
                                text-align: left;
                                .item.current{
                                    border: 1px solid $backgroundColor;
                                    background-color: $backgroundColor;
                                    color: #fff;
                                }
                                .item {
                                    display: inline-block;
                                    vertical-align: middle;
                                    line-height: 30px;
                                    padding: 0 8px;
                                    cursor: pointer;
                                    margin: 1px;
                                    font-size: 14px;
                                    border: 1px solid #fff;
                                }

                                .label {
                                    position: absolute;
                                    left: 0;
                                    top: 5px;
                                    font-weight: 700;
                                    color: #ccc;
                                    line-height: 32px;
                                    font-size: 14px;
                                }
                            }

                        }

                        .content {
                            min-height: 210px;
                            display: none;

                            &:first-child {
                                min-height: 210px;
                                display: block;
                            }
                        }
                    }

                    .tab_nav {
                        font-size: 0;
                        border-bottom: 1px solid #f1f1f1;
                        text-align: left;
                        .item.current {
                            color: $backgroundColor;
                            &:after{
                                content: "";
                                position: absolute;
                                left: 0;
                                bottom: -1px;
                                width: 100%;
                                height: 2px;
                                background-color: $backgroundColor;
                            }
                        }

                        .item {
                            display: inline-block;
                            vertical-align: top;
                            font-size: 15px;
                            padding: 6px 10px;
                            cursor: pointer;
                            position: relative;
                        }
                    }
                }
            }
        }

        .el-input__suffix {
            right: 30px;

            .is-reverse {
                transform: rotate(0deg);
            }

            i {
                transform: rotate(180deg);
                position: absolute;

            }
        }


    }
</style>
